/*  header-comment
/*  file   : /Users/arida/react-hrm-h5/src/modules/welcome/index
/*  author : arida
/*  date   : 2017-6-4 18:24:50
/*  last   : 2017-9-6 18:18:34
*/
import React, { Component } from "react";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Button } from "@ali/ding-ui";
import autobind from "autobind-decorator";
import { setTitle } from "../../utils/dingtalk.js";

// actions
import { fetchUser, startEntry } from "../../actions/welcome/";

// utils
import { openLink } from '../../utils/dingtalk';

import "./index.less";

// 将store注入组件的props
const mapStateToProps = state => ({ welcome: state.WELCOME_USER });
// 将action与dispatch进行绑定并注入组件的props
const mapDispatchToProps = dispatch => ({
  // 区分绑定到props的action与传递的props
  actions: bindActionCreators(
    {
      dispatch,
      fetchUser,
      startEntry
    },
    dispatch
  )
});

@connect(mapStateToProps, mapDispatchToProps)
export default class Welcome extends Component {
  static defaultProps = {
    welcome: {
      user: {}
    }
  };
  // propTypes 验证
  static propTypes = {
    welcome: PropTypes.object.isRequired,
    actions: PropTypes.shape({
      dispatch: PropTypes.func.isRequired,
      fetchUser: PropTypes.func.isRequired,
      startEntry: PropTypes.func.isRequired
    }).isRequired
  };
  constructor(props) {
    super(props);

    setTitle({
      title: "完善个人信息"
    });
  }
  componentWillMount() {
    this.props.actions.fetchUser();
  }
  @autobind
  onEntryClick() {
    // getCurrentUser();
    // 将当前操作人添加到待入职列表
    this.props.actions
      .startEntry()
      .then(() => (openLink("#/stepOne")));
  }
  render() {
    const { isEdit } = this.props.welcome.user || {};
    return (
      <div>
        <div
          className={`welcome-backgroud ${isEdit
            ? "welcome-backgroud-employee"
            : ""}`}
        />
        <div className="welcome-text-top">
          <span className="welcome-text-top_bold">
            {isEdit ? "档案更新" : "欢迎你加入我们这个有爱的大家庭"}
          </span>
          <br />&nbsp;&nbsp;&nbsp;&nbsp;
          {isEdit ? "你填写的信息会在人事档案中更新" : "让小伙伴更好的了解你，从完善信息开始吧~"}
        </div>
        <Button
          across={true}
          onClick={this.onEntryClick}
          className="welcome-button"
          type="primary"
        >
          {isEdit ? "开始更新个人档案" : "立即办理入职"}
        </Button>
        <span className="welcome-text-bottom">为保证你在公司的权益和安全，请确保填写的信息真实有效</span>
      </div>
    );
  }
}
